<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <select name="" id="province">
                <option value="mr">请选择省份</option>
                <!-- <option value="">湖北</option>
                <option value="">河南</option>
                <option value="">湖南</option> -->
            </select>
            <select name="" id="city">
                <option value="">请选择城市</option>
                <!-- <option value="">武汉</option>
                <option value="">襄阳</option>
                <option value="">鄂州</option> -->
            </select>
    <script>
        var province=document.getElementById("province")
        var html1='<option value="">请选择省份</option>'
        var city=document.getElementById("city")
        var xhr=new XMLHttpRequest()
        xhr.open("get","pro.json")
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var arr=JSON.parse(xhr.responseText)//整个数组
                console.log(arr)
                arr.forEach((item,index) => {
                    html1+=`<option>${item.cityName}</option>`
                    // var option=document.createElement("option")
                    // option.innerHTML=item.cityName
                    // province.appendChild(option)
                });
                province.innerHTML=html1
                console.log()
            province.onchange=function(){
                if(this.value){
                    // console.log(this.value)
                    var citylist=arr.filter(item=>this.value==item.cityName)[0].list
                    // console.log(citylist)
                    var html2='<option value="">请选择城市</option>'
                    citylist.forEach(item => {
                        html2+=`<option value="">${item}</option>`
                    });
                }
                else{
                    html2='<option value="">请选择城市</option>'
                }
                city.innerHTML=html2
                // for(var i=0;i<arr.length;i++){
                //     if(this.value==arr[i].cityName){
                //         var arrcity=arr[i].list
                //         city.innerHTML=`<option value="">请选择城市</option>`
                //         arrcity.forEach(item => {
                //             var option=document.createElement("option")
                //             option.innerHTML=item
                //             city.appendChild(option)  
                //         });
                //     }
                // }

            }              
            }
        }
    </script>
</body>
</html>